<template>
  <div class="game">
    <div class="user-info">
      <div class="avathour">
        <img src="/static/img/me.png">
      </div>
      <div class="nick-name">
        名字名字名字
      </div>
    </div>
    <div class="game-information">
      <div class="integral">
        积分：{{1000+200}}
      </div>
      <div class="ranking">
        当前排名：{{20+20}}
      </div>
    </div>
    <div class="share-it">
      <div >
        <a href="../noPublic/main" class="nav-nopublic">关注接收中奖信息</a>
      </div>
      <div>
        <button class="sharing-group" open-type="share">分享群获得额外博饼次数</button>
      </div>
    </div>
    <canvas canvas-id="myCanvas" style="border 1px solid"/>
    <i-toast id="toast" />
    <button @click="canvasMove">测试</button>

    <navigation :displayCondition="gameData"></navigation>
  </div>
</template>
<script>
import navigation from '@/components/navigation'
import {request, authRequest, refreshToken, login, logout} from '../../utils/api.js'
import WXP from 'minapp-api-promise'
const { $Toast } = require('../../../static/iview/base/index')
export default {
  data () {
    return {
      gameData: 'game'
    }
  },
  components: {
    navigation
  },
 mounted () {
    const ctx = wx.createCanvasContext('myCanvas')
    // ctx.setFillStyle('red')
    // ctx.fillRect(10, 10, 150, 75)
    ctx.drawImage('/static/img/shaizi-1.png', 34, 36, 32, 33)
    ctx.drawImage('/static/img/shaizi-2.png', 84, 86, 32, 33)
    ctx.drawImage('/static/img/shaizi-3.png', 154, 76, 42, 43)
    ctx.draw()
    wx.showShareMenu({
        withShareTicket: true
    })
  },
  methods: {
    canvasMove () {
      // setInterval(
      //   function () {
      //     const ctx = wx.createCanvasContext('myCanvas')
      //     ctx.drawImage('/static/img/shaizi-1.png', 100, 100, 42, 43)
      //     ctx.drawImage('/static/img/shaizi-2.png', 210, 60, 42, 43)
      //     ctx.drawImage('/static/img/shaizi-3.png', 300, 30, 42, 43)
      //     ctx.rotate(60 * Math.PI / 180)
      //     ctx.transform(1, 1, 1, 1, 50, 60)
      //     ctx.draw()
      //     ctx.clearRect(10, 10, 150, 75)
      //   }, 6000
      // )
      this.handleText()
    },
    handleText () {
        $Toast({
            content: '一秀(20分)分享微信群可立即获得额外博饼机会',
            duration: 3,
            mask: true
        })
        // wx.showToast({
        //   title: '一秀(20分)分享微信群可立即获得额外博饼机会',
        //   icon: 'none',
        //   duration: 2000
        // })
    },
    onShareAppMessage: (res) => {
      wx.showShareMenu({
        withShareTicket: true
      })
      return {
        title: '博饼赢大奖',
         success:  (res) => {
           console.log(res)
          // console.log("转发成功", res);
            if (res.shareTickets) {
                        // 获取转发详细信息
              let res =  WXP.checkSession();
               // let res = await authRequest({
                      //   data: {
                      //     encrypted_data:res.encryptedData,
                      //     iv: res.iv,
                      //   },
                      //   url: "moonCakeCounts",
                      //   method: "POST",
                      // })
              console.log(res)
          }
          
        },
        fail: (res) => {
          console.log("转发失败", res);
        }
      }
    }
  }
}
</script>
<style scoped>
.game {
  display: flex;
  flex-direction: column;
}

.game .user-info {
  position: relative;
  top: 10rpx;
  left: 20rpx;
}

.game .game-information {
  position: absolute;
  top: 10rpx;
  right: 20rpx;
}

.game .share-it {
  display: flex;
  justify-content: space-around;
}

.game img {
  width: 84rpx;
  height: 86rpx;
  transform: rotate3d(90deg);
  animation: transform 3s;
}

.game .share-it {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  margin-top: 50rpx;
}

.game .share-it .nav-nopublic {
  width: 280rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #EA5149;
  border-radius: 10px;
}

.game .share-it .sharing-group {
  width: 360rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #EA5149;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  padding: 0;
}
.game canvas {
  width: 680rpx;
  margin: 0 auto;
}
</style>
